<template>
  <canvas id="mycanvas" v-bind:style="sizeStyle"></canvas>
</template>
<script>
export default {
  data () {
    return {
      mycanvas: '',
      ctx: '',
      small: {
        width: '120px',
        height: '50px'
      },
      middle: {
        width: '200px',
        height: '70px'
      }
    }
  },
  computed: {
    sizeStyle: function () {
      return this.size === 'middle' ? this.middle : this.small
    }
  },
  props: {
    lineDate: {
      type: Number
    },
    size: {
      type: String
    }
  },
  created () {
    this.mycanvas = null
    this.ctx = null
  },
  mounted () {
    this.$nextTick(() => {
      this.mycanvas = document.getElementById('mycanvas')
      this.ctx = this.mycanvas.getContext('2d')
      this.mycanvas.onmousemove = this.canvasMouse
      this.mycanvas.onmouseout = this.clearAll
      this.canvasPic()
    })
  },
  methods: {
    canvasPic () {
      for (let i = 0; i < 6; i++) {
        this.ctx.lineTo(20 + i * 50, 65)
        this.ctx.strokeStyle = '#2196f3'
        this.ctx.stroke()
        this.ctx.fillStyle = '#2196f3'
        this.ctx.moveTo(0 + i * 35, 35 * i + 35)
        this.ctx.beginPath()
        this.ctx.arc(20 + 50 * i, 65, 5, 0, Math.PI * 2, true)
        this.ctx.closePath()
        this.ctx.fill()
      }
    },
    canvasMouse (e) {
      let x = e.pageX - this.mycanvas.offsetLeft
      this.ctx.clearRect(0, 10, 400, 50)
      if (this.size === 'middle') {
        if (x > 0 && x < 40) {
          this.tipsFont('first', x, 50)
        } else if (x > 50 && x < 100) {
          this.tipsFont('second', x, 50)
        }
      } else if (this.size === 'small') {
        if (x > 0 && x < 10) {
          this.tipsFont('first', x, 50)
        } else if (x > 10 && x < 20) {
          this.tipsFont('second', x, 50)
        }
      }
    },
    tipsFont (txtLoc, x, y) {
      this.ctx.save()
      var padding = 3
      var font = '16px arial'
      this.ctx.font = font
      this.ctx.textBaseline = 'bottom'
      this.ctx.fillStyle = 'yellow'
      // var width = this.ctx.measureText(txtLoc).width;
      let width = 100
      let height = 40
      // var height = parseInt(font, 10);
      this.ctx.fillRect(x, y - height, width + padding * 2, height + padding * 2)
      this.ctx.fillStyle = '#000'
      this.ctx.fillText(txtLoc, x + padding, y + padding)
      this.ctx.restore()
    },
    clearAll () {
      this.ctx.clearRect(0, 10, 400, 50)
    }
  }
}
</script>
